<template>
    <div style="height:100%;overflow:hidden;position:fixed;top:0;bottom:0;width:100%;">
        <div style="height:44px;line-height:44px;text-align:center;postion:relative" v-show="$store.state.title">
            <div>
                {{$store.state.title}}
            </div>
            <transition name="pop">
                <div style="position:absolute;top:0;left:0;width:44px"
                     @click="$router.goback()" v-show="is_goback_show">
                    ＜
                </div>
            </transition>
            <transition name="pop">
                <div style="position:absolute;top:0;right:0"
                     @click="on_customer_click"
                     v-if="hasCustomer">
                    {{$store.state.customer ? ('*' +
                    $store.state.customer.phone.substring($store.state.customer.phone.length -
                    4)) : '登录'}}
                </div>
            </transition>
        </div>
        <!--transition name="pop"-->
        <router-view :style="{height:$store.state.title?'calc(100% - 70px)':'100%'}" v-if="!hasTabbar">
        </router-view>
        <!--/transition-->
        <weui-tabbar :list="tabbar_list" :index="tabbar_index"
                     :style="{height:$store.state.title?'calc(100% - 70px)':'calc(100% - 70px)'}" @on-click="on_tabbar_click" v-else>
            <router-view style="height:100%">
            </router-view>
        </weui-tabbar>
        <div style="font-size:12px;text-align:center">
            <a href="http://www.beian.miit.gov.cn">{{beian}}</a>
        </div>
        <a id="open-url" href="" style="display:none;" target="_blank">
            下一步
        </a>
        <weui-dialog :is_show="true" title="" :list="[]" v-if="$store.state.customer && $store.state.customer.returnWay=='alipay' && !$store.state.customer.alipay">
            <bind-alipay :title="$store.state.title"></bind-alipay>
        </weui-dialog>
        <weui-dialog :is_show="$store.state.login_dialog.is_show" title="" :list="[]" @on-mask="on_login_dialog_mask">
            <fan-li-login></fan-li-login>
        </weui-dialog>
        <weui-dialog :is_show="$store.state.dialog.is_show" :title="$store.state.dialog.title||''"
                     :list="$store.state.dialog.list||[]" @on-click="on_dialog_click">
            <div v-html="$store.state.dialog.content||''"></div>
        </weui-dialog>
        <weui-toast :is_show="$store.state.toast.is_show" :type="$store.state.toast.type"
                    :content="$store.state.toast.content" @on-mask="on_toast_mask">
        </weui-toast>
        <weui-toast :is_show="$store.state.loading.is_show" type="loading" :content="$store.state.loading.content">
        </weui-toast>
        <div style="position:absolute;bottom:0;left:0;right:0;color:white;background-color:red">
            <div v-for="(log, index) in $store.state.logs">
                <div style="float:right" @click="onDelLogClick(index)">
                    ×
                </div>
                <div>
                    <div v-for="item in log">
                        {{item}}
                    </div>
                </div>
            </div>
        </div>
        <!--bloom-menu
          :iconImgArr="iconImgArr"
          :startAngle="-90"
          :endAngle="0"
          :itemNum="4"
          class="menu-left-corner-wrapper"
          :showBadge="$store.state.customer && !$store.state.customer.alipay"
          @on-click="on_bloom_menu_click"
          v-if="hasCustomer">
        </bloom-menu-->
    </div>
</template>

<script>
    import WeuiToast from './components/WeuiToast'
    import WeuiDialog from './vue2componentSet/src/components/WeuiDialog'
    import WeuiInput from './vue2componentSet/src/components/WeuiInput'
    import WeuiTabbar from './vue2componentSet/src/components/WeuiTabbar'
    // import BloomMenu from './vue-bloom-menu-master/src/components/Menu/menu.vue'
    import FanLiLogin from './view/FanLiLogin.vue'
    import BindAlipay from './view/BindAlipay.vue'
    import store from './lib/store'
    import global from './lib/global'
    import XScroll from './lib/xscroll/xscroll'
    import Pulldown from './lib/xscroll/plugins/pulldown'
    import Pullup from './lib/xscroll/plugins/pullup'
    import axios from 'axios'

    export default {
        components: {
            WeuiToast,
            WeuiDialog,
            WeuiInput,
            WeuiTabbar,
            // BloomMenu,
            FanLiLogin,
            BindAlipay
        },
        data() {
            return {
                history: [],
                test: '',
                logs: [],
                tabbar_index: 0,
                hasCustomer: location.hostname.endsWith('etourly.com'),
                hasTabbar: location.hostname.endsWith('etourly.com'),
                beian: location.hostname.endsWith('etourly.com') ? '粤ICP备13075385号-1' : '粤ICP备17130705号'
            }
        },
        mounted() {
            this.$router.beforeEach((to, from, next) => {
                this.$store.commit('loading', {
                    is_show: true,
                    content: 'loading'
                })
                global.on_close()
                next()
            })
            this.$router.afterEach((to, from) => {
                var is_goback = false
                for (var i = 0; i < this.history.length; i++) {
                    if (to.fullPath == this.history[i]) {
                        if (i == 0)
                            this.history = []
                        else {
                            this.history = this.history.slice(0, i)
                        }
                        is_goback = true
                        break
                    }
                }
                this.history.push(to.fullPath)
                this.$store.commit('loading', {
                    is_show: false
                })
                if (is_goback) {
                    if (to.path == from.path) {
                        global.on_goback(to.fullPath)
                    }
                } else {
                    global.on_scroll_pullup_loading = resolve => {
                        resolve()
                    }
                }
                global.on_close = () => {
                }
            })
            this.$router.goback = () => {
                if (this.history.length > 1) {
                    this.$router.push(this.history[this.history.length - 2])
                } else {
                    this.history = []
                    if (location.hash.indexOf('#/chart') == 0)
                        this.$router.push('/chartList')
                    else
                        this.$router.push('/')
                }
            }
            this.$router.redirect = (link) => {
                this.history = this.history.slice(0, -1)
                this.$router.push(link)
            }

            !global.is_debug && axios.post(global.server + 'getCustomerLoginStatus.do', {}).then(result => {
                const obj = result.data
                if (obj.result == 1) {
                    this.$store.commit('customer_login', {
                        phone: obj.phone,
                        alipay: obj.alipay,
                        wechatQrcode: obj.wechatQrcode,
                        isPromoter: obj.isPromoter,
                        returnWay: obj.returnWay
                    })
                    obj.isAdmin && this.$store.commit('admin_login', {
                        phone: obj.phone
                    })
                }
            })

            if (require('./lib/browserDetect')().wechat) {
                var code = ''
                if (location.search) {
                    location.search.split('?')[1].split('&').forEach(item => {
                        if (item.split('=')[0] == 'code')
                            code = item.split('=')[1]
                    })
                }
                if (code == '')
                    location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx226c3c9557c44304&redirect_uri=' + encodeURIComponent(location.href) + '&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect'
                else {
                    axios.post(global.server + 'wechatSnsOauth2AccessToken.do', {
                        code: code
                    }).then(result => {
                        var obj = result.data
                        //alert(obj.result)
                        if (obj.phone) {
                            this.$store.commit('customer_login', {
                                phone: obj.phone,
                                alipay: obj.alipay,
                                wechatQrcode: obj.wechatQrcode,
                                isPromoter: obj.isPromoter,
                                returnWay: obj.returnWay
                            })
                            obj.isAdmin && this.$store.commit('admin_login', {
                                phone: obj.value
                            })
                            if (this.$store.state.login_dialog.resolve)
                                this.$store.state.login_dialog.resolve()
                            else if (location.hash == '#/login')
                                this.$router.push('/')
                            this.$store.commit('login_dialog', {
                                is_show: false
                            })
                        }
                    }, result => {
                        console.log(result)
                    })
                }
            }
        },
        store,
        methods: {
            onDelLogClick(index) {
                global.ws.send('delLog ' + index);
            },
            on_login_dialog_mask() {
                this.$store.commit('login_dialog', {
                    is_show: false
                })
            },
            on_customer_click() {
                if (!this.$store.state.customer) {
                    this.$store.commit('login_dialog', {
                        is_show: true
                    })
                } else {
                    this.$router.push('/customerMenu')
                }
            },
            on_dialog_click(index) {
                this.$store.state.dialog['on-click'] && this.$store.state.dialog['on-click'](index)
            },
            on_bloom_menu_click(index) {
                this.iconImgArr[index].link && (location.href = this.iconImgArr[index].link)
            },
            on_toast_mask() {
                this.$store.commit('toast', {
                    is_show: false
                })
            },
            on_tabbar_click(index) {
                if (index == this.tabbar_index)
                    return
                if (index == 0)
                    this.$router.push('/')
                else if (index == 1)
                    this.$router.push('/top100')
                else if (index == 2)
                    this.$router.push('/coupon')
                else if (index == 3) {
                    if (!this.$store.state.customer) {
                        this.$store.commit('login_dialog', {
                            is_show: true,
                            resolve: () => {
                                this.on_tabbar_click(3)
                            }
                        })
                        return
                    } else {
                        this.$router.push('/customerMenu')
                    }
                }
                else
                    return
                this.tabbar_index = index
            }
        },
        computed: {
            is_goback_show() {
                if (this.history.length == 0)
                    return false
                if (this.history.length == 1) {
                    if (this.history[0] == '/' || this.history[0].indexOf('/?') == 0 || this.history[0] == '/chartList' || this.history[0] == '/fanLi') {
                        return false
                    }
                }
                return true
            },
            iconImgArr() {
                return [{
                    //iconUrl: require('./vue-bloom-menu-master/src/common/icon/house.svg'),
                    iconName: '教程',
                    iconSize: 50,
                    icon: '&#xe659;',
                    link: '/jiaocheng.html'
                    // }, {
                    //   iconName: 'bill',
                    //   iconSize: 50,
                    //   icon: '&#xe618;',
                    //   link: '/bill'
                    // }, {
                    //   iconName: 'returnRecord',
                    //   iconSize: 50,
                    //   icon: '&#xe61e;',
                    //   link: '/returnRecord'
                    // }, {
                    //   iconName: 'bindAlipay',
                    //   iconSize: 50,
                    //   icon: '&#xe61a;',
                    //   link: '/bindAlipay',
                    //   showBadge: this.$store.state.customer && !this.$store.state.customer.alipay
//        }, {
//          iconName: 'setPassword',
//          iconSize: '50',
//          icon: '&#xe6cb;',
//          link: '/setPassword'
                }]
            },
            tabbar_list() {
                return [{
                    label: '首页',
                    color: 'black',
                    icon: '&#xe62a;'
                }, {
                    label: 'top 100',
                    color: 'black',
                    icon: '&#xe639;'
                }, {
                    label: '优惠券',
                    color: 'black',
                    icon: '&#xe665;'
                }, {
                    label: '我的',
                    color: 'black',
                    icon: '&#xe6d0;',
                    has_dot: this.$store.state.customer && !this.$store.state.customer.alipay
                }]
            },
        }
    }
</script>

<style>
    @font-face {
        font-family: 'iconfont';  /* project id 429979 */
        src: url('//at.alicdn.com/t/font_429979_mj5ykaafl2lqh0k9.eot');
        src: url('//at.alicdn.com/t/font_429979_mj5ykaafl2lqh0k9.eot?#iefix') format('embedded-opentype'),
        url('//at.alicdn.com/t/font_429979_mj5ykaafl2lqh0k9.woff') format('woff'),
        url('//at.alicdn.com/t/font_429979_mj5ykaafl2lqh0k9.ttf') format('truetype'),
        url('//at.alicdn.com/t/font_429979_mj5ykaafl2lqh0k9.svg#iconfont') format('svg');
    }

    html, body {
        height: 100%;
        margin: 0;
    }

    /**
    * vue-router transition
    */
    .slide-fade-enter-active {
        transition: all .3s ease;
    }

    .slide-fade-leave-active {
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }

    .slide-fade-enter, .slide-fade-leave-active {
        padding-left: 10px;
        opacity: 0;
    }

    .pop-enter {
        transform: translate(100%, 0);
    }

    .pop-enter-active {
        animation-name: popInRight;
    }

    .pop-leave {
        transform: translate(-100%, 0);
    }

    .pop-leave-active {
        animation-name: popOutLeft;
    }

    .pop-enter-active, .pop-leave-active {
        animation-duration: .2s;
        will-change: transform;
        position: absolute;
        left: 0;
        top: 0;
    }

    @keyframes popInLeft {
        from {
            transform: translate(-100%, 0);
        }
        to {
            transform: translate(0, 0);
        }
    }

    @keyframes popOutLeft {
        from {
            transform: translate(0, 0);
        }
        to {
            transform: translate(-100%, 0);
        }
    }

    @keyframes popInRight {
        from {
            transform: translate(100%, 0);
        }
        to {
            transform: translate(0, 0);
        }
    }

    @keyframes popOutRight {
        from {
            transform: translate(0, 0);
        }
        to {
            transform: translate(100%, 0);
        }
    }
</style>

<!--style lang="stylus" type="text/stylus">
    @import "vue-bloom-menu-master/src/common/stylus/menuConfig.styl"
</style-->
